.c-flex {
  display: flex;
  flex-direction: row;
  &-1 {
    flex: 1;
  }
  &-center {
    justify-content: center;
    align-items: center;
  }
  &-items-center {
    align-items: center;
  }
  &-justify-center {
    justify-content: center;
  }
  &-cols {
    flex-direction: column;
  }
  &-around {
    justify-content: space-around;
  }
  &-between {
    justify-content: space-between;
  }
  &-wrap {
    flex-wrap: wrap;
  }
  &-end {
    justify-content: flex-end;
  }
  &-items-end{
	  align-items: flex-end;
  }
  &-gap{
	  gap: 16rpx;
  }
}
.c-font {
  color: #333;
  &-sm {
    font-size: 12px;
  }
  &-md {
    font-size: 14px;
  }
  &-lg {
    font-size: 16px;
  }
  &-xl {
    font-size: 18px;
  }
  &-500 {
    font-weight: 500;
  }
  &-600 {
    font-weight: 600;
  }
  &-700 {
    font-weight: 700;
  }
  &-800 {
    font-weight: 800;
  }
  &-900 {
    font-weight: 900;
  }
}
.c-p {
  &-10 {
    padding: 10px;
  }
  &-15 {
    padding: 15px;
  }
  &-20 {
    padding: 20px;
  }
  &-30 {
    padding: 30px;
  }
  &-40 {
    padding: 40px;
  }
  &-l-4 {
    padding-left: 4px;
  }
  &-l-10 {
    padding-left: 10px;
  }
  &-l-20 {
    padding-left: 20px;
  }
  &-l-30 {
    padding-left: 30px;
  }
  &-l-40 {
    padding-left: 40px;
  }
  &-r-10 {
    padding-right: 10px;
  }
  &-r-20 {
    padding-right: 20px;
  }
  &-r-30 {
    padding-right: 30px;
  }
  &-r-40 {
    padding-right: 40px;
  }
  &-x-10 {
    padding-left: 10px;
    padding-right: 10px;
  }
  &-x-16 {
    padding-left: 16px;
    padding-right: 16px;
  }
  &-x-20 {
    padding-left: 20px;
    padding-right: 20px;
  }
  &-x-30 {
    padding-left: 30px;
    padding-right: 30px;
  }
  &-y-10 {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  &-y-20 {
    padding-top: 20px;
    padding-bottom: 20px;
  }
  &-b-10 {
    padding-bottom: 10px;
  }
  &-b-20 {
    padding-bottom: 20px;
  }
  &-b-30 {
    padding-bottom: 30px;
  }
  &-b-40 {
    padding-bottom: 40px;
  }
  &-b-50 {
    padding-bottom: 50px;
  }
  &-t-10 {
    padding-top: 10px;
  }
  &-safe-b-0 {
    padding-bottom: 0;
    padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
    padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
  }
  &-safe-b-10 {
    padding-bottom: 10px;
    padding-bottom: calc(
      10px + constant(safe-area-inset-bottom)
    ); /* 兼容 iOS < 11.2 */
    padding-bottom: calc(
      10px + env(safe-area-inset-bottom)
    ); /* 兼容 iOS >= 11.2 */
  }
  &-safe-b-20 {
    padding-bottom: 20px;
    padding-bottom: calc(
      20px + constant(safe-area-inset-bottom)
    ); /* 兼容 iOS < 11.2 */
    padding-bottom: calc(
      20px + env(safe-area-inset-bottom)
    ); /* 兼容 iOS >= 11.2 */
  }
  &-safe-b-30 {
    padding-bottom: 30px;
    padding-bottom: calc(
      30px + constant(safe-area-inset-bottom)
    ); /* 兼容 iOS < 11.2 */
    padding-bottom: calc(
      30px + env(safe-area-inset-bottom)
    ); /* 兼容 iOS >= 11.2 */
  }
  &-safe-b-40 {
    padding-bottom: 40px;
    padding-bottom: calc(
      40px + constant(safe-area-inset-bottom)
    ); /* 兼容 iOS < 11.2 */
    padding-bottom: calc(
      40px + env(safe-area-inset-bottom)
    ); /* 兼容 iOS >= 11.2 */
  }
  &-safe-b-50 {
    padding-bottom: 50px;
    padding-bottom: calc(
      50px + constant(safe-area-inset-bottom)
    ); /* 兼容 iOS < 11.2 */
    padding-bottom: calc(
      50px + env(safe-area-inset-bottom)
    ); /* 兼容 iOS >= 11.2 */
  }
  &-safe-b-60 {
    padding-bottom: 60px;
    padding-bottom: calc(
      60px + constant(safe-area-inset-bottom)
    ); /* 兼容 iOS < 11.2 */
    padding-bottom: calc(
      60px + env(safe-area-inset-bottom)
    ); /* 兼容 iOS >= 11.2 */
  }
  &-safe-b-70 {
    padding-bottom: 70px;
    padding-bottom: calc(
      70px + constant(safe-area-inset-bottom)
    ); /* 兼容 iOS < 11.2 */
    padding-bottom: calc(
      70px + env(safe-area-inset-bottom)
    ); /* 兼容 iOS >= 11.2 */
  }
  &-safe-b-100 {
    padding-bottom: 100px;
    padding-bottom: calc(
      100px + constant(safe-area-inset-bottom)
    ); /* 兼容 iOS < 11.2 */
    padding-bottom: calc(
      100px + env(safe-area-inset-bottom)
    ); /* 兼容 iOS >= 11.2 */
  }
}
.c-m {
  &-b-5 {
    margin-bottom: 5px;
  }
  &-b-10 {
    margin-bottom: 10px;
  }
  &-b-20 {
    margin-bottom: 20px;
  }
  &-b-30 {
    margin-bottom: 30px;
  }
  &-b-40 {
    margin-bottom: 40px;
  }
  &-b-50 {
    margin-bottom: 50px;
  }
  &-t-10 {
    margin-top: 10px;
  }
  &-t-20 {
    margin-top: 20px;
  }
  &-t-30 {
    margin-top: 30px;
  }
  &-t-40 {
    margin-top: 40px;
  }
  &-t-5 {
    margin-top: 5px;
  }
  &-r-4 {
    margin-right: 4px;
  }
  &-r-8 {
    margin-right: 8px;
  }
  &-r-10 {
    margin-right: 10px;
  }
  &-r-15 {
    margin-right: 15px;
  }
  &-r-20 {
    margin-right: 20px;
  }
  &-l-4 {
    margin-left: 4px;
  }
  &-l-8 {
    margin-left: 8px;
  }
  &-l-10 {
    margin-left: 10px;
  }
  &-l-15 {
    margin-left: 15px;
  }
  &-l-20 {
    margin-left: 20px;
  }
}

.c-bg {
  &-white {
    background: #fff;
  }
  &-black {
    background: #000;
  }
  &-gray{
	background: #F8F9FA;
  }
}

.no-data {
  color: #aaaaaa;
  font-size: 30rpx;
  text-align: center;
  padding-top: 100rpx;
}

.c-absolute {
  position: absolute;
}
.c-relative {
  position: relative;
}
.c-fixed {
  position: fixed;
}

.c-cancel {
  color: rgba(#000, 0.55);
}
.c-confirm {
  color: #2678ff;
}

.c-text {
  &-center {
    text-align: center;
  }
  &-right {
    text-align: right;
  }
}
.c-textarea {
  background: #f2f2f2;
  padding: 26rpx;
  border-radius: 8px;
  textarea {
    width: 100%;
  }
}

.c-btn {
  &-primary {
    background: #d45c1d;
    color: #fff;
    border-radius: 99px;
    width: 100%;
    height: 45px;
    line-height: 45px;
    font-size: 15px;
    text-align: center;
  }
  &-info {
    background: #aaa;
    color: #fff;
    border-radius: 99px;
    width: 100%;
    height: 45px;
    line-height: 45px;
    font-size: 15px;
    text-align: center;
  }
  &-text {
	color: #999;
	border-radius: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 15px;
	text-align: center; 
	display: inline-block;
	border: 1rpx solid #999;
	padding: 0 20px;
  }
  &-success {
  	color: #40AE36;
  	border-radius: 40px;
  	height: 40px;
  	line-height: 40px;
  	font-size: 15px;
  	text-align: center; 
  	display: inline-block;
	padding: 0 20px;
  	border: 1rpx solid #40AE36;
  }
}
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.c-rounded {
  &-8 {
    border-radius: 8px;
  }
  &-10 {
    border-radius: 10px;
  }
  &-12 {
    border-radius: 12px;
  }
  &-15 {
    border-radius: 15px;
  }
  &-20 {
    border-radius: 20px;
  }
  &-30 {
    border-radius: 30px;
  }
}

.c-text {
  &-nowarp {
    white-space: nowrap;
  }
  &-primary {
    color: #00A5B5;
  }
  &-info {
    color: #818181;
  }
  &-success {
    color: #2678ff;
  }
  &-warning {
    color: #DD544A;
  }
  &-error {
    color: #ff4d4f;
  }
  &-gray {
    color: #999;
  }
  &-black {
    color: #000;
  }
  &-white {
    color: #fff;
  }
  &-dark {
    color: #333;
  }
  &-light {
    color: #999;
  }
  &-disabled {
    color: #ccc;
  }
}
.c-border{
	&-bottom {
		border-bottom: 1rpx solid rgba(0,0,0,0.05);
	}
	&-top{
		border-top: 1rpx solid rgba(0,0,0,0.05);
	}
}
.c-card {
	border-radius: 32rpx;
	background-color: #ffffff;
}